<template>
  <div>
    <main-nav></main-nav>
    <ul class="fake-tabs">
      <li v-for="item in types" :key="'ranking_' + item.key">
        <router-link :to="{name: 'ranking', params: {type: item.key}}" :class="{active: type === item.key}">{{item.text}}</router-link>
      </li>
    </ul>
    <div class="container margin-top-15">
      <i-table :columns="columns[type]" :data="items"></i-table>
      <i-page class="margin-top-10" style="text-align:center" v-show="total" :total="total" :page-size="20" :current="page" size="small" @on-change="search" show-total show-elevator></i-page>
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapActions } from 'vuex'
import MainNav from '../components/main-nav'
export default {
  components: {
    MainNav
  },
  data() {
    return {
      columns: {
        courseOwners: [
          {
            title: '工号',
            render(h, { row }) {
              return h('span', row.entity.code)
            },
            width: 120
          },
          {
            title: '姓名',
            render(h, { row }) {
              return h('span', row.entity.name)
            }
          },
          {
            title: '上传数',
            key: 'total',
            width: 120
          }
        ],
        tags: [
          {
            title: '名称',
            render(h, { row }) {
              return h('span', row.entity.name)
            }
          },
          {
            title: '课程数',
            key: 'total',
            width: 120
          }
        ],
        notes: [
          {
            title: '标题',
            render(h, { row }) {
              return h('span', row.entity.title)
            }
          },
          {
            title: '作者',
            render(h, { row }) {
              return h(
                'span',
                row.entity.createdBy.name +
                  '（' +
                  row.entity.createdBy.code +
                  '）'
              )
            },
            width: 140
          },
          {
            title: '推荐数',
            key: 'total',
            width: 120
          }
        ],
        postOwners: [
          {
            title: '工号/学号',
            render(h, { row }) {
              return h('span', row.entity.code)
            },
            width: 120
          },
          {
            title: '姓名',
            render(h, { row }) {
              return h('span', row.entity.name)
            }
          },
          {
            title: '发贴数',
            key: 'total',
            width: 120
          }
        ]
      },
      type: 'courseOwners',
      page: 1,
      types: [
        {
          key: 'courseOwners',
          text: '勤劳的园丁'
        },
        {
          key: 'tags',
          text: '最热知识点'
        },
        {
          key: 'notes',
          text: '最热笔记'
        },
        {
          key: 'postOwners',
          text: '活跃在讨论区'
        }
      ],
      items: [],
      total: 0
    }
  },
  methods: {
    search(page) {
      page = page || 1
      const that = this
      const index = this.types.findIndex(x => x.key === this.type)
      this.$http
        .get('/vts/rank/query', { params: { page: page, index: index } })
        .then(response => {
          that.items = response.data.items
          that.total = response.data.total
        })
    }
  },
  activated() {
    this.type = this.$route.params.type
    this.search()
  }
}
</script>

<style>
</style>
